<template>
  <div :class="$style.container" :style="{height: conHeight}">
    <div :class="$style.login">
      <div :class="$style.unsplash">
        <img src="https://unsplash.it/400/400?random" alt="">
      </div>
      <el-form ref="form" :model="form" :class="$style.form">
        <h2>登陆</h2>
        <el-form-item>
          <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="large" type="primary" @click="onSubmit">登陆</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as apis from 'services/admin'

export default {
  name: 'Login',
  data() {
    return {
      conHeight: `${window.winH}px`,
      form: {
        name: 'ymd',
        password: 'xtr2017',
      },
    }
  },
  methods: {
    onSubmit() {
      apis.login(this.form)
        .then(() => {
          this.$message({
            message: '登录成功',
            type: 'success',
          })
          this.$router.push('/overall')
        })
        .catch(err => this.$message({
          message: err,
          type: 'error',
        }))
    },
  },
}

</script>

<style module>
.container {
  display: flex;
  align-items: center;
  background-color: #F9FAFC;
  height: 100%;
  color: #fff;
}

.login {
  display: flex;
  align-items: center;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  padding-right: 0;
  background-color: #fff;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
}

.form {
  width: 400px;
  padding: 0 30px;
  text-align: center;
}

.form button {
  width: 100%;
}

.form h2 {
  color: #000;
}

.unsplash img {
  width: 400px;
  height: 400px;
}
</style>
